<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 信息发布</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/onstatus' }">已审核</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="shell">
            <div class="import">
                <span>信息标题：</span><el-input class="count" v-model="query.title" placeholder="请输入内容"></el-input>
                <span>发布作者：</span><el-input class="count" v-model="query.author" placeholder="请输入内容"></el-input>
                <el-row>
                    <el-button class="messages" type="primary" @click="fetchData()">筛选</el-button>
                    <el-button class="messages" type="primary" @click="empty">清空筛选条件</el-button>
                </el-row>
            </div>
            <el-table class="details" :data="tableData" border>
                <el-table-column prop="title" label="标题" width="width" align="center">
                </el-table-column>
                <el-table-column prop="content" label="发布内容" width="width" align="center">
                </el-table-column>
                <el-table-column prop="author" label="发布人" width="width" align="center">
                </el-table-column>
                <el-table-column prop="checktime" label="发布时间" width="width" align="center">
                </el-table-column>
                <el-table-column prop="checkstatus" label="审核状态" width="width" align="center">
                    <template slot-scope="scope">
                        {{ getChineseStatus(scope.row.status) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="width" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleClick(scope.row)" size="small">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { Postselectnotices } from '@/api/messagePublish'
export default {
    data() {
        return {
            input: '',
            query: {
                id: 0,
                title: '',
                author: '',
                pageNum: 1,
                pageSize: 2,
                checkstatus: 1,
            },
            tableData: [],
            pageTotal: 0
        }
    },
    mounted() {
        // 在页面加载时获取传递的数据
        // this.receivedData = JSON.parse(this.$route.query.data);
        this.fetchData()
    },
    methods: {
        async fetchData() {
            // 调用接口获取数据
            let result = await Postselectnotices(this.$qs.stringify(this.query))
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total;
            }
        },
        handleClick(row) {
            this.$router.push({ path: '/details', query: { id: row.id, from: '/onstatus' } });
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val
            this.fetchData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.fetchData();
        },
        //转换状态为中文
        getChineseStatus(val) {
            return '已审核'
        },
        empty() {
            this.query.title = ''
            this.query.author = ''
            this.fetchData()
        }
    },
}
</script>

<style scoped>
.shell {
    width: 98%;
    height: 90%;
    margin: auto;
    margin-top: 10px;
    background-color: #FFFFFF;
}

h2 {
    padding-top: 15px;
    margin-left: 20px;
}

.import {
    width: 96%;
    height: 109px;
    margin: auto;
    margin-top: 16px;
    padding: 10px;
}

.count {
    width: 280px;
    margin-top: 15px;
}


.messages {
    margin-left: 50px;
    margin-top: 15px;
    font-weight: 800;
}

.details {
    width: 96%;
    margin: auto;
    margin-top: 20px;
}
</style>